<template>
  <!--侧滑菜单容器-->
  <div >
      <!-- 联系选择弹窗 -->
    <actionSheet></actionSheet>
      <div  class="mui-content mui-scroll-wrapper">
        <!-- 返回菜单fixed -->
        <header v-show="nav_show" class="mui-bar mui-bar-nav" :class="[{'search-fixe ':search_fixe},{'animated':animated}, {'slideInDown':slideInDown}]">
          <span  @tap="gtolast()" class="iconfont icon-fanhui header_fanhui" style="color:#333333;line-height: 43px;font-size: 0.9rem;"></span>
          <span class="iconfont icon-fenxiang-01 search-right"></span>
        </header>
        <div class="mui-scroll ">
          <!-- 返回菜单 -->
          <header class="mui-bar " style="position:absolute;background: transparent;box-shadow: 0 0px 0px #ccc !important;">
            <div class="back"  @tap="gtolast()">
              <span class="iconfont icon-fanhui header_fanhui ic-fanhui" style="color:#333333;line-height: 43px;font-size: 0.9rem;"></span>
            </div>
            <div class="share">
              <span class="iconfont icon-fenxiang-01 search-right ic-share"></span>
            </div>
          </header>
          <div class="mod-detail">
            <!-- 商品图片 -->
            <!-- swiper 这里竟然组件化后只能用 click,useCapture，我曹-->
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="v in allcarModelMsg.pics">
                  <!-- {{allcarModelMsg.pics.length}}  -->
                  <div class="image-header" v-if="v.picPath==null || v.picPath==''">
                    <img :src="noCarPic">
                  </div>

                  <div class="image-header"  v-else>
                    <img :src="$store.state.appData.imgUrl+v.picPath">
                  </div> 
                </div> 
              </div>  
              <!-- 如果需要分页器 -->
              <div class="swiper-pagination"></div>
            </div>
            <div v-if="billCount" style="width:100%;height:35px;line-height:35px;color:#fff;background:#FF6A27;padding-left:20px;font-size: 13px;">本车系{{billCount}}人正在拼单</div>
            <div class="s-car" id="segmentedControl">

              <a>{{allcarModelMsg.currentCar.name}}<!-- <em @tap="handleRouteCarSeries" class="switch-car">更改车型<span class="icon-dddddd"></span></em> --></a>
            </div>
            <div class="car-info clearfix">
              <ul>
                <li class="mprice" v-if="allcarModelMsg.currentCar.guidePrice !== '0.00'"><span class="label">厂商指导价:</span>
                  <span>{{allcarModelMsg.currentCar.guidePrice}}万</span>
                </li>
                <li class="mprice" v-else><span class="label">厂商指导价:</span>
                  <span>暂无</span>
                </li>
                <!-- <li class="cprice"><span class="label">裸车价:</span><em>暂无</em><em class="ico c-green"><span class="icon-downarrow" style="font-size:0.5rem;color: #0db35f;">1万</span></em></li> -->
              </ul>
            </div>
            <!-- 参数配置 -->
            <ul style="background:#fff;"  @tap="gocarDetails(allcarModelMsg)">
              <li class="mui-table-view-cell" style="border-top: 1px solid #e5e5e5;">
                <a class="mui-navigate-right" >
                  <span style="margin-left:3px;font-size:14px;" class="usertit">参数配置</span>  
                  <span  class="userpams" ></span>
                </a>
              </li>
            </ul>
            <!-- 全部车型 -->
            <carSeries></carSeries>
            <!-- <div class="mui-backdrop" @tap="switchBackDrop" v-if="backdrop"></div> -->
            <!-- 全部报价 -->
            <!-- <nakedPrice :prices="allcarModelMsg.price"></nakedPrice> -->
            <!-- 感兴趣车型 -->
            <!--  <likeCar></likeCar> -->

            <!-- 购车流程 -->
            <carProcess style="margin-bottom:51px;margin-top:10px;"></carProcess>
          </div>
        </div>
      </div>
    <!-- off-canvas backdrop -->
    <!-- <div class="mui-off-canvas-backdrop"></div> -->
    <!-- <div class="tabs-col">
      <a @tap="gocarDetails"><span class="icon-888888" style="font-size:1.2rem;"></span><br>配置</a>
      <a @tap="goConfirmBidding(allcarModelMsg.currentCar,allcarModelMsg.pics,allcarModelMsg.isBid)"><span :class="allcarModelMsg.isBid? 'icon-chuiz-01-1' : 'icon-99'" style="font-size:1.2rem;"></span><br><span v-if="allcarModelMsg.isBid">已询价</span><span  v-else>询价</span></a>
      <a @tap="atn(allcarModelMsg.currentCar.id)"><span id="atn" :class="this.$store.state.carDetails.isattention? 'icon-shoucang1' : 'icon-999'"   style="font-size:1.2rem;" ></span><br><span id="atnA"  v-if="this.$store.state.carDetails.isattention">已关注</span><span id="atnA"  v-else>关注</span></a>
      <a v-if="allcarModelMsg.isBid" @tap="goCrowdOrdering(allcarModelMsg.currentCar, allcarModelMsg.pics,allcarModelMsg.isBid,allcarModelMsg.isShare)"><span class="icon-pindan-01" style="font-size:1.2rem;"></span><br>询价中</a>
      <a v-else-if="allcarModelMsg.isShare" @tap="goCrowdOrdering(allcarModelMsg.currentCar, allcarModelMsg.pics,allcarModelMsg.isBid,allcarModelMsg.isShare)"><span class="icon-pindan-01" style="font-size:1.2rem;"></span><br>拼单中</a>
      <a v-else @tap="goCrowdOrdering(allcarModelMsg.currentCar, allcarModelMsg.pics,allcarModelMsg.isBid,allcarModelMsg.isShare)"><span class="icon-pindan-02" style="font-size:1.2rem;"></span><br>拼单</a>
      <a @tap="switchBackDrop"><span class="icon-223" style="font-size:1.2rem;"></span><br>联系</a>
    </div> -->
    <nav class="mui-bar mui-bar-tab footer" >
      <div class="two" style="margin-left:2%;">
          <a @tap="atn(allcarModelMsg.currentCar.id)">
            <span id="atn" class="shoucang" :class="this.$store.state.carDetails.isattention? 'icon-guanzhu22' : 'icon-guanzhu2'" style="font-size:1rem;" ></span>
            <span id="atnA" class="shoucangText" v-if="this.$store.state.carDetails.isattention">已关注</span>
            <span id="atnA" class="shoucangText" v-else>关注</span>
          </a>
      </div>
      <div class="two"  style="margin-left:1%;">
          <a @tap="switchBackDrop">
            <span class="icon-223 shoucang" style="font-size:1rem;"></span>
            <span class="shoucangText">联系</span>
          </a>
      </div>
       
      <!-- <div class="three" @tap="goCrowdOrdering(allcarModelMsg.currentCar, allcarModelMsg.pics,allcarModelMsg.isBid,allcarModelMsg.isShare)"> -->
        <!-- <a v-if="allcarModelMsg.isBid" @tap="goCrowdOrdering(allcarModelMsg.currentCar, allcarModelMsg.pics,allcarModelMsg.isBid,allcarModelMsg.isShare)">
          <span style="color: #fff">询价中</span>
        </a>
        <a v-else-if="allcarModelMsg.isShare" @tap="goCrowdOrdering(allcarModelMsg.currentCar, allcarModelMsg.pics,allcarModelMsg.isBid,allcarModelMsg.isShare)">
          <span style="color: #fff">拼单中</span>
        </a> -->
        <!-- <a  >
          <span style="color: #fff">期货拼单</span>
        </a>
      </div> -->
      <!-- <div class="three backRed" @tap="goConfirmBidding(allcarModelMsg.currentCar,allcarModelMsg.pics,allcarModelMsg.isBid,allcarModelMsg.isShare)">
          <a > -->
          <!-- span :class="allcarModelMsg.isBid? 'icon-chuiz-01-1' : 'icon-99'" style="font-size:1.2rem;"></span> -->
          <!-- <span v-if="allcarModelMsg.isBid">已询价</span>
          <span  v-else-if="allcarModelMsg.isShare">已拼单</span> -->
         <!--  <span>现货询价</span>
          </a>
      </div> -->
      <div class="three backRed" style="float:right" @tap="goCrowdOrdering(allcarModelMsg.currentCar, allcarModelMsg.pics,allcarModelMsg.isBid,allcarModelMsg.isShare)">
          <a  >
          <span style="color: #fff">期货拼单</span>
        </a>
      </div>
    </nav>
  </div>
</template>

<script>
  import mui from "static/js/mui";
  import Swiper from "static/js/swiper";
  import nakedPrice from "@/components/filter/models-offer/naked-price/naked-price";
  import likeCar from "@/components/filter/models-offer/like-car/like-car";
  //import contactPopover from "@/components/base/contact-popover/contact-popover";
  import actionSheet from '@/components/base/contact-popover/actionsheet'
  import carProcess from "@/components/base/car-process/car-process"
  import carSeries from "@/components/filter/models-offer/car-series/car-series"
  //import { getcarModelDetail } from '@/api/carDetail'
  import { getSBillCountBySeriesId } from '@/nodeApi/carDetail'
  import {mapGetters} from 'vuex'
  import utils from '@/utils/utils'

  export default {
    data() {
      return {
        billCount: 0,
        brand:{
          cName:'',
          id:''
        },
        noCarPic:'static/img/noCarPic.png',
        animated: false,
        slideInDown: false,
        nav_show: false,
        search_fixe: false,
        backdrop: false,
        atnobj:{
          carId:"",
          customerId:this.$store.getters.user.id
        },
        food: {
          image: "static/img/car.jpg"
        }
      };
    },
    computed:{
        ...mapGetters([
            'allcarModelMsg',
            'carDetails',
            'atnMsg'
        ]),
    },
    watch:{

    },
    created() {
      this.getBillCount()
    },
    //注意销毁掉监听，不然报错
    destroyed(){
      window.removeEventListener("scroll",this.handleNavSwitch, false);
    },
    components:{ nakedPrice, likeCar, actionSheet, carProcess, carSeries },
    methods: {
      parentBackdrop() {
        
        this.backdrop = false
      },
      getBillCount() {
        let resData = {'carSeriesId': this.allcarModelMsg.currentCar.carSriesId}
        getSBillCountBySeriesId(resData).then(res=>{
          this.billCount = res.data.billCount
        })
      },
      /* 从子组件接收参数，监听为子组件方法名 */
      handleBackdrop(data) {
        this.backdrop = data;
      },
      switchBackDrop() {
        this.backdrop = !this.backdrop;
        mui('#sheet1').popover('toggle');
        //document.body.removeChild(document.getElementsByClassName('mui-backdrop-action')[0])
      },
      handleRouteCarSeries() {
        this.$router.push({
          path: "./carSeries",
        });
      },
      handleVal(val) {
        this.$router.push({
          path: "/carSeries",
          params: {
            brand: val
          }
        });
      },
      goChat(index) {
        this.$router.push({
          name: "chat",
          params: {
            roomType: indexq
          }
        });
      },
      //询价
      goConfirmBidding(currentCar, pics, isBid, isShare) {
        //console.log(isBid)
        if(isBid){
          mui.alert('您已询价', '提示', ['确定'],function() {},'div');
          return
        }
        if(isShare){
          mui.alert('您已拼单', '提示', ['确定'],function() {},'div');
          return
        }
        this.$router.push({
          name: "confirmBidding",
          params:{
            currentCar: currentCar,
            pics: pics
          }
        });
        
      },
      // 确认拼单
      goCrowdOrdering(currentCar, pics, isBid , isShare) {
        let that = this
        if(window.localStorage.getItem('token')){
          if(isBid){
            mui.alert('询价中', '提示', ['确定'],function() {},'div')
            return
          }
          if(isShare){
            mui.alert('拼单中', '提示', ['确定'],function() {},'div')
            return
          }
          this.$router.push({
            name: "confirmCrowd",
            params:{
              currentCar: currentCar,
              pics: pics
            }
          })  
        }else{
          mui.alert('前先登陆', '信息框', ['确定'], function () {
            // document.location.href = 'http://www.baidu.com'
            that.$router.push({ name: 'login' })
          }, 'div')
        }
      },
      //跳转配置页面
      gocarDetails(allcarModelMsg) {
        //console.log(allcarModelMsg.currentCar.id)
        this.$router.push({
          name: "carDetails",
          params:{ carId: allcarModelMsg.currentCar.id }
        });
      },
      //跳转首页
      goshoye() {
        this.$router.push({
          path: "/home"
        });
      },
      //返回上一层
      gtolast(){
        // //console.log(this.allcarModelMsg.carSeries)
        this.brand.cName=this.allcarModelMsg.carSeries.name
        this.brand.id=this.allcarModelMsg.carSeries.brandId
        /* this.$router.push({
          name: "filter",
          params: {
            brand:this.brand,
          }
        }) */
        this.$router.back(-1)
        //history.go(-1)
      },
  
      //五角星
      atn(carId){
        this.atnobj.carId=carId
        ////console.log(this.allcarModelMsg.isattention)
        if(this.allcarModelMsg.isattention){
          this.$store.dispatch('showAtn',this.atnobj)
          document.getElementById("atn").className="icon-guanzhu2"
          document.getElementById("atnA").innerHTML="关注"
          return
        }else{
          this.$store.dispatch('showAtn',this.atnobj)
          document.getElementById("atn").className="icon-guanzhu22"
          document.getElementById("atnA").innerHTML="已关注"
        }
      },
      handleNavSwitch() {
        try {
          this.srollHeight = scroll.y;
          if (this.srollHeight < 0) {
            this.nav_show = true;
            this.search_fixe = true;
            this.animated = true;
            this.slideInDown = true;
          } else   {
            this.nav_show = false;
            this.search_fixe = false;
            this.animated = false;
            this.slideInDown = false;
          }
        } catch (err) {
          //console.log("改变窗口会触发此错误，需要优化");
        }
      },
      updateSwiper() {
        //mySwiper
        new Swiper(".swiper-container", {
          autoplay: false, //可选选项，自动滑动
          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
            type: "fraction",
            renderFraction: function (currentClass, totalClass) {
              return (
                '<div style="float:right;margin-right:10px;background: rgba(52, 52, 52, 0.5);width:60px;height:30px;color:#ddd;font-size:16px;line-height:30px;' +
                '"><span class="' +
                currentClass +
                '"></span>' +
                "/" +
                '<span class="' +
                totalClass +
                '"></span></div>'
              );
            }
          },
          observer:true,
          observeParents:true
        });
      }
    },
    mounted() { 
      let that = this
      mui.init({
        keyEventBind: {
          backbutton: true  //关闭back按键监听
        }
      })
      mui.back = function () {
          history.go(-1)
      }
      //竖向滚动
      scroll = mui(".mui-scroll-wrapper").scroll({
        scrollY: true, //是否竖向滚动
        scrollX: false, //是否横向滚动
        startX: 0, //初始化时滚动至x
        startY: 0, //初始化时滚动至y
        indicators: true, //是否显示滚动条
        deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
        bounce: false //是否启用回弹
      });
      this.updateSwiper()
      window.addEventListener('scroll',  
        this.handleNavSwitch,false
      );
    
    }
  };

</script>

<style scoped>
  @import "~static/css/swiper.css";
  /*mui中的样式*/
 
  html,
  body {
    background-color: #efeff4;
  }

  p {
    text-indent: 22px;
  }

  span.mui-icon {
    font-size: 14px;
    color: #007aff;
    margin-left: -15px;
    padding-right: 10px;
  }

  .mui-off-canvas-right {
    color: #fff;
  }

  .title {
    margin: 35px 15px 10px;
  }

  .title+.content {
    margin: 10px 15px 35px;
    color: #bbb;
    text-indent: 1em;
    font-size: 14px;
    line-height: 24px;
  }

  input {
    color: #000;
  }

  .mui-bar.mui-bar-nav {
    height: 30px;
  }

  .mui-bar .mui-icon {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 1rem;
    color: #fff;
  }

  .mui-off-canvas-wrap.mui-active .mui-off-canvas-backdrop {
    box-shadow: none;
  }

  .mui-bar-nav~.mui-content {
    padding-top: 0px;
  }
  /*引入图标*/

  [class^="icon-"],
  [class*=" icon-"] {
    line-height: 0;
    font-size: 1rem;
    color: #ff6a27;
  }
  /*右侧导航选择*/

  .hglst {
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    transition: all 0.1s linear;
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 19999999;
    min-height: 568px;
  }

  .hglst .mod-shade {
    position: absolute;
    opacity: 0;
    z-index: 19999997;
  }

  .hglst.open {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .hglst.open .mod-shade {
    opacity: 1;
  }

  .hglst ul {
    z-index: 19999998;
    cursor: pointer;
    background: #fff;
    height: 100%;
  }

  .hglst li.c-panle {
    margin: 0 0.75rem;
    font-size: 0.6rem;
  }

  .hglst li.c-panle dt {
    padding: 0.4rem 0 0.3rem;
  }

  .hglst li.c-panle dt .clear {
    float: right;
  }

  .hglst li.c-panle dt .clear a {
    position: relative;
    color: #a3a3a3;
  }

  .hglst li.c-panle dd span {
    float: left;
    width: 33.333%;
  }

  .hglst li.c-panle dd span a {
    display: block;
    padding: 0.2rem 0;
    margin: 0.15rem;
    text-align: center;
    border: 1px solid #e9e9e9;
    border-radius: 0.1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .hglst li.c-close {
    position: relative;
  }

  .hglst li.c-close a {
    position: absolute;
    top: 0;
    padding: 0.5rem;
  }

  .hglst li.c-close a.i-close {
    left: 0;
  }

  .hglst li.c-close a.i-city {
    right: 0;
    font-size: 0.6rem;
  }

  .hglst li.c-logo {
    padding-top: 2.7rem;
  }

  .hglst li.c-logo h2 {
    margin: 0 auto;
    width: 7.5rem;
    height: 1.7rem;
    background: url(hqgicon.png) no-repeat;
    background-size: 7.5rem 1.7rem;
  }

  .hglst li.c-search {
    padding: 0.5rem;
  }

  .hglst li.c-search .s-box {
    position: relative;
  }

  .hglst li.c-search .s-box input {
    width: 100%;
    padding: 0.4rem 0 0.4rem 1.3rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #e9e9e9;
    border-radius: 0.15rem;
    font-size: 0.8rem;
  }

  .hglst li.c-menu {
    border-top: 1px solid #e5e5e5;
  }

  .hglst li.c-menu a {
    font-size: 0.8rem;
    position: relative;
    display: block;
    padding: 1rem;
    border-bottom: 1px solid #e5e5e5;
  }

  .hglst li.c-menu a.i-home:before {
    background-position: 0 -1rem;
  }

  .hglst li.c-menu a.i-parity:before {
    background-position: -1rem -1rem;
  }

  .hglst li.c-menu a.i-about:before {
    background-position: -2.2rem -1rem;
  }

  .hglst li.c-history {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e5e5;
  }

  .hglst li.app-download {
    position: absolute;
    width: 100%;
    bottom: 1rem;
    left: 0;
  }

  .hglst li.app-download a {
    display: block;
    margin: -0.5rem 0.85rem;
    color: #ff6a27;
    border: 1px solid #ff6a27;
    padding: 0.3rem;
    text-align: center;
    border-radius: 2px;
    font-size: 0.85rem;
  }

  .bubble {
    position: fixed;
    bottom: 6%;
    padding: 0 1rem;
    font-size: 0.6rem;
    z-index: 6;
  }
  /*汽车搜索详情*/

  address,
  cite,
  dfn,
  em,
  i,
  var {
    font-style: normal;
  }

  .mod-detail {
    background-color: #f5f5f5;
  }

  .s-car {
    background-color: #fff;
  }

  .s-car:before {
    bottom: 0;
    content: "";
    background-color: #e5e5e5;
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }

  .s-car a {
    display: block;
    position: relative;
    padding: 0.5rem 0rem 0.5rem 1rem;
    -webkit-tap-highlight-color: rgba(245, 245, 245, 0.3);
    font-size: 0.8rem;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
  }

  .s-car a em {
    color: #ff6a27;
    font-size: 0.7rem;
    font-weight: 400;
    position: absolute;
    right: 0;
    top: 50%;
    padding-right: 0.9rem;
    margin-top: -0.51rem;
  }

  .s-car.s-car-fixed {
    position: fixed;
    top: 2.2rem;
    width: 100%;
    left: 0;
    z-index: 4;
    background-color: rgba(255, 255, 255, 0.9);
  }

  .s-car.s-car-fixed a {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .car-info {
    background-color: #fff;
    padding: 0rem 0.3rem 0.5rem 0;
    font-size: 0.6rem;
  }

  .car-info em {
    color: #ff3034;
  }

  .car-info .carbox {
    position: relative;
    text-align: center;
    width: 5rem;
    margin: 0 0.3rem;
  }

  .car-info .carbox .pic {
    position: relative;
    overflow: hidden;
  }

  .car-info .carbox .pic img {
    width: 98%;
    margin: -8% auto 0;
    cursor: pointer;
  }

  .car-info ul {
    padding-top: 0.2rem;
    padding-left: 1rem;
  }

  .car-info .ico {
    position: relative;
  }

  .car-info .ico.c-green {
    color: #0db35f;
  }

  .car-info .ico.c-green:after {
    background-position: -4.15rem 0;
  }

  .car-info .ico.c-up:after {
    background-position: -5.1rem 0;
  }

  .car-info li.cprice em.c-green {
    margin-left: 0.25rem;
  }

  .car-info li.aprice {
    font-size: 0.6rem;
  }

  .car-info li.aprice em.num {
    font-size: 0.75rem;
  }

  .car-info li.mprice {
    font-size: 0.6rem;
    max-height: 0.95rem;
    overflow: hidden;
  }

  .tabs-col {
    font-size: 0.6rem;
    background-color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    bottom:0px;
    width:100%;
    padding: 0.8rem 0 0rem 0;
    z-index:99;
    border-top: 1px solid #ddd;
  }

  .tabs-col a {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
  }

  .pop-city li {
    position: relative;
  }
  /*全局class样式*/

  .g-fl {
    float: left;
  }

  .g-fr {
    float: right;
  }

  .g-al {
    text-align: left;
  }

  .g-ar {
    text-align: right;
  }

  .g-am {
    text-align: center;
  }

  .g-pt10 {
    padding-top: 0.5rem;
  }

  .g-pl10 {
    padding-left: 0.5rem;
  }

  .g-mt8 {
    margin-top: 0.4rem;
  }

  .g-mt10 {
    margin-top: 0.5rem;
  }

  .g-ml10 {
    margin-left: 0.5rem;
  }

  #netPriceShow {
    position: absolute;
    z-index: 999;
  }
  /* 轮播图 */
    
  .image-header{
    padding:0px;
  }
  .image-header img {
    width: 100%;
  }

  .swiper-pagination-fraction {
    bottom: 20px;
  }
  /* 图标重新定义css */

  .icon-dddddd {
    font-size: 14px;
  }

  .switch-car {
    font-size: 0.8rem !important;
    color: #ff6a27;
  }

  dt {
    color: #333333 !important;
  }
  /* 头部导航 */

  header {
    box-shadow: 0 0px 0px #ccc !important;
    border-bottom:0px!important;
  }

  .search-right {
    color: #333333 !important;
    font-size: 0.9rem;
    float: right;
    margin-top: 20px;
  }

  .bg-color {
    position: relative !important;
  }

  .back {
    position: fixed;
    top: 5px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1;
  }

  .share {
    position: fixed;
    top: 5px;
    right: 10px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1;
  }

  .ic-fanhui {
    position: relative;
    top: -9px;
    left: 4px;
    font-size: 15px!important;
    color: #fff!important;
  }

  .ic-share {
    position: relative;
    top: -7px;
    right: 5px;
    font-size: 14px!important;
    color: #fff!important;
  }
  /* fixed导航 */

  .search-fixe {
    position: fixed;
    top: 0;
    z-index: 9;
    display: block!important;
  }

  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  .slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
  }

  @keyframes slideInDown {
    from {
      top: -48px;
    }
    to {
      top: 0px;
    }
  }
  

/* 底部询价 */
.mui-bar {
  box-shadow: 0 0 1px #d2d2d2;
}
.two {
  padding-top:2px;
  height: 50px;
  width: 20%;
  line-height: 50px;
  padding-left: 0px;
  text-align:center;
  font-size: 16px;
  display: inline-block;
  float: left;
  /* border-right: 1px solid #e9e9e9; */
}
.shoucang{
  height:30px;
  line-height: 30px;
  display: block;
}
.shoucangText{
  height:20px;
  line-height: 20px;
  font-size:12px;
  display: block;
  position: relative;
  top:-4px;
  color:#666666;
}
.icon-guanzhu22{
  height:30px;
  line-height: 30px;
  font-size: 1rem;
  display: block;
}
.icon-guanzhu2{
  color: #999999;
  height:30px;
  line-height: 30px;
  display: block;
}
.icon-223{
  color:#999999;
  height:30px;
  line-height: 30px;
  display: block;
}

.red {
  color: #ff6a27;
}
.three {
  height: 50px;
  /* width: 30%; */
  width:55%;
  line-height: 50px;
  font-size: 16px;
  display: inline-block;
  float: left;
  text-align: center;
  background:#ffa519;
}
.abled {
  background-color: #ff6a27;
  color: #fff;
}
.disabled {
  background-color: #b2b2b2;
  color: #fff;
}
.footer{
  background-color: #fff;
  border-bottom: 0px solid #ddd;
  border-top: 1px solid #ddd;
  opacity: 0.95;
}
.backRed{
  background: #ff6a27;
  color: #fff;
}
.backRed a span{
  color: #fff;
}
.disabled{
  background-color: #b2b2b2;
}
</style>